﻿define(['knockout', 'glyphModel', 'pathPointModel', 'refData', 'dataLoader'],
    function (ko, GlyphModel, PathPointModel, refData, dataLoader) {
        return function MainPageViewModel () {
            "use strict";

            var self = this;

            self.backImage = ko.observable(refData.backgrounds[0]);
            self.backImageCSS = ko.computed(function(){
                return typeof(self.backImage()) === 'string' ?
                    'url(images/backgrounds/' + self.backImage() + ')' :
                    'none';
            });
            self.glyphs = ko.observableArray([]);
            self.points = ko.observableArray([]);
            self.fonts = refData.fonts;
            self.backgrounds = refData.backgrounds;

            var activeElement = ko.observable(null);
            self.activeElement = ko.computed({
                read: function(){
                    return activeElement();
                },
                write: function(value){
                    if(activeElement() !== null){
                        activeElement().active(false);
                    }

                    activeElement(value);

                    if(value !== null){
                        value.active(true);
                    }
                },
                owner: self
            });


            self.isJSONInvalid = ko.observable(false);
            self.jsonString = ko.computed({
                read: function(){
                    var jsonArr = [];
                    for (var i = 0; i < self.glyphs().length; i++){
                        jsonArr.push(self.glyphs()[i].rawData());
                    }
                    return JSON.stringify(jsonArr);
                },
                write: function(value){
                    var json = null;

                    try{
                        json = JSON.parse(value);
                    }
                    catch(e){
                        self.isJSONInvalid(true);
                        return;
                    }

                    self.init(json);
                    self.isJSONInvalid(false);
                },
                owner: self
            });

            self.activateElement = function(element){
                self.activeElement(element);
            };

            self.deactivateAll = function(){
                self.activeElement(null);
            };

            self.deleteActiveGlyph = function(){
                var glyph = self.activeElement();
                self.activeElement(null);
                self.glyphs.remove(glyph);
            };

            self.addNewGlyph = function(){
                var newGlyph = new GlyphModel();
                self.glyphs.push(newGlyph);
                self.activeElement(newGlyph);
            };

            self.addNewPoint = function(){
                var newPoint = new PathPointModel();
                self.points.push(newPoint);
                self.activeElement(newPoint);
            };

            self.init = function(rawData){
                var arr = [];
                for (var i = 0; i < rawData.length; i++){
                    arr.push(new GlyphModel(rawData[i]));
                }

                self.glyphs(arr);
            };

            self.saveLevel = function(){
                dataLoader(
                    "services/SaveLevel",
                    {
                        name: 'first',
                        json: self.jsonString()
                    },
                    null,
                    true);
            };

            //constructor logic
            var level = dataLoader("services/GetLevel", {name: 'first'});
            if(level){
                self.jsonString(level.json)
            }
            else{
                self.init([]);
            }
        };
    });